<template>
	<view class="homePage">

		<view v-if="!welcome" :style="{'top':welcomeTop}" class="homePage-slide fixed" @touchmove="touchmove">
			<image class="homePage-slide-bg block" src="https://ryyf.wangjintech.cn/static/image/common/0.png"
				mode="aspectFill" />
			<image class="homePage-slide-top block absolute" src="https://ryyf.wangjintech.cn/static/image/common/1.png" />
			<image class="homePage-slide-top2 block absolute" src="https://ryyf.wangjintech.cn/static/image/common/2.png" />
			<image class="homePage-slide-scrool block absolute" src="https://ryyf.wangjintech.cn/static/image/common/3.png" />
		</view>

		<image class="homePage-bg fixed block" src="https://ryyf.wangjintech.cn/static/image/common/13.png" />

		<view class="homePage-header sticky">
			<image class="homePage-bg commend block" src="https://ryyf.wangjintech.cn/static/image/common/4.png" />
			<image class="homePage-bg fish block" src="https://ryyf.wangjintech.cn/static/image/common/5.png" />
		</view>

		<view class="swiper">
			<up-swiper :list="swiperList" height='320rpx' indicator indicatorMode="line" keyName="bannerImg" circular
				@click="clickSwiper"></up-swiper>
		</view>
		<view class="homePage-main border-box relative zi2">
			<template v-for="(item,index) in chunkArray(bannerList.list,3)" :key="index">
				<up-row align="top">
					<up-col span="4" v-for="(child,childIndex) in item" :key="childIndex" @click="contribute(child)">
						<view class="item">
							<image class="homePage-bg fish radius8" :src="child.content" mode="aspectFill" />
							<view>{{child.name}}</view>
						</view>
					</up-col>
				</up-row>
				<up-gap height="50rpx"></up-gap>
			</template>
		</view>

		<image v-if="token" @tap.stop="signInOpen" class="signIn fixed" :style="{ top: mouseParams.top + 'px' }"
			@touchstart.stop="ontouchstart" @touchmove.stop="ontouchmove" @touchend.stop="ontouchend"
			src="https://ryyf.wangjintech.cn/static/image/point/signIn.png">
		</image>

		<!-- 签到框 -->
		<up-popup :show="signIn.dialogShow" mode='center' bgColor='transparent' @close='signIn.dialogShow = false'>
			<view class="sign_dialog relative">
				<image class="sign_dialog-bg absolute" src="https://ryyf.wangjintech.cn/static/image/point/signBg.png" />
				<view class="relative zi2 sign_dialog-main flex justify-content_center wrap">
					<view class="sign_dialog-main-item relative" v-for="item in giftList" :key="item.id">
						<view class="sign_dialog-main-item-mask absolute" v-if="signTime >= item.dayCount"> </view>
						<image v-if="item.dayCount === 7" class="sign_dialog-main-item-bg absolute"
							src="https://ryyf.wangjintech.cn/static/image/point/giftBg3.png" />
						<image v-else class="sign_dialog-main-item-bg absolute"
							src="https://ryyf.wangjintech.cn/static/image/point/giftBg.png" />
						<view class="relative zi2">
							<image class="sign_dialog-main-item-gift" :src="item.icon" />
							<view class="sign_dialog-main-item-content omit1" :style="{'marginTop':!(+item.type === 1)?'16rpx':0}">
								{{item.title}}
							</view>
							<view class="sign_dialog-main-item-num" v-if="+item.type === 1">+{{item.point}}</view>
							<view
								:style="{'color':item.dayCount === 7?'#ffffff':'#E55838','marginTop':!(+item.type === 1)?'20rpx':'10rpx'}"
								class="sign_dialog-main-item-day">
								第{{item.dayCount}}天</view>
						</view>
					</view>
				</view>
				<view class="sign_dialog-ok relative" @click="currentCheck">
					<image class="fatherBg" src="https://ryyf.wangjintech.cn/static/image/point/btn.png"></image>
					<view class="relative zi2">{{ giftStatus?'去抽奖':isSignIn?'已签到':'立即签到'}}</view>
				</view>
			</view>
		</up-popup>

		<up-gap height="60"></up-gap>
		<tabbar :current="0" />
	</view>
</template>

<script setup>
	import authApi from "@/api/member/auth.js"
	import secondApi from "@/api/biz/second.js"
	import openApi from "@/api/biz/open.js"
	import {
		msg,
		duration,
		chunkArray
	} from "@/utils/tool.js"
	import {
		reactive,
		ref
	} from "vue"
	import tabbar from '@/components/tabbar.vue';
	import {
		onShow,
		onLoad,
		onPageScroll
	} from "@dcloudio/uni-app"
	import dayjs from "dayjs"

	const mouseParams = reactive({
		top: 195,
		left: 0,
		startX: 0,
		startY: 0,
		moving: false,
		sliding: false,
	});

	const ontouchend = (e) => {
		mouseParams.moving = false;
		if (!mouseParams.sliding) signInOpen()
	};
	const ontouchstart = (e) => {
		mouseParams.startX = e.changedTouches[0].clientX;
		mouseParams.startY = e.changedTouches[0].clientY;
		mouseParams.moving = true;
		mouseParams.sliding = false;
	};
	const ontouchmove = (e) => {
		if (mouseParams.moving) {
			let offsetX = e.changedTouches[0].clientX - mouseParams.startX;
			let offsetY = e.changedTouches[0].clientY - mouseParams.startY;
			mouseParams.left += offsetX;
			mouseParams.top += offsetY;
			mouseParams.startX = e.changedTouches[0].clientX;
			mouseParams.startY = e.changedTouches[0].clientY;
			mouseParams.sliding = true;
		}
	};

	const signIn = reactive({
		show: false,
		dialogShow: false,
	})

	const signInOpen = () => {
		signIn.dialogShow = true;
	}

	function clickSwiper(index) {
		let imgs = swiperList.value.map(item => item.bannerImg)
		uni.previewImage({
			urls: imgs,
		});
	}

	const token = ref('')

	function touchmove(val) {
		welcomeTop.value = "-100vh"
		uni.setStorageSync("welcome", true)
	}

	function login() {
		uni.navigateTo({
			url: "/pages/login/index"
		})
	}

	const bannerList = reactive({
		list: []
	})

	function allList() {
		openApi.allList({
			type: 1
		}).then(res => {
			bannerList.list = res.data
		})
	}

	const swiperList = ref([])

	function getBannerList() {
		openApi.getBannerList({
			type: 1
		}).then(res => {
			swiperList.value = res.data;
		})
	}

	function contribute(val) {
		uni.navigateTo({
			url: `/contribute/map/index?id=${val.id}&name=${val.name}`
		})
	}

	const welcome = ref(true);
	const welcomeTop = ref("0");

	onPageScroll((val) => {
		if (!welcome.value) {
			if (val.scrollTop >= 25) {
				welcomeTop.value = "-100vh"
				uni.setStorageSync("welcome", true)
			}
		}
	})

	// 是否签到
	const isSignIn = ref(false);
	// 抽奖机会
	const giftStatus = ref(false);

	// 立即签到
	const currentCheck = () => {
		if (giftStatus.value) {
			uni.navigateTo({
				url: "/pointProduct/turntable/index"
			})
		} else {
			secondApi.sign().then(res => {
				if (res.code === 0) {
					msg("签到成功");
					setTimeout(() => {
						getUserSign('sign');
					}, duration)
				}
			})
		}
	}


	// 签到记录
	const signTime = ref(0);
	const getUserSign = (type) => {
		secondApi.getUserSign().then(res => {
			let signInDate = res.data.signDate;
			let signInDay = dayjs().format('YYYY-MM-DD');

			giftStatus.value = false;

			signTime.value = res.data.signTime;

			if (signInDate === signInDay) {
				signTime.value = res.data.signTime;
				isSignIn.value = true;
				if (signTime.value === 7) {
					giftStatus.value = true;

					if (type === 'sign') {
						uni.navigateTo({
							url: "/pointProduct/turntable/index"
						})
					}
				}
			} else {
				if (res.data.signTime === 7) signTime.value = 1;
			}

			console.log(signTime.value)
		})
	}

	// 签到奖励
	const giftList = ref([]);
	const getSignGiftList = () => {
		secondApi.getSignGiftList().then(res => {
			giftList.value = res.data;
		})
	}

	onShow(() => {
		token.value = uni.getStorageSync('accessToken')
		if (token.value) {
			getUserSign()
		}
		allList()
		getBannerList()
		getSignGiftList()
	})
	onLoad(() => {
		if (!uni.getStorageSync('welcome')) {
			welcome.value = false;
		}
	})
</script>

<style scoped lang="scss">
	.sign_dialog {
		width: 650rpx;
		height: 924rpx;



		&-ok {
			width: 447rpx;
			height: 147rpx;
			margin: 55rpx auto 0;
			text-align: center;

			view {
				line-height: 132rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}

		&-main {
			padding-top: 208rpx - 41rpx;

			&-item {
				margin: 41rpx 11rpx 0;
				width: 130rpx;
				height: 220rpx;
				text-align: center;

				&-mask {
					top: 0;
					left: 0;
					background: #000;
					opacity: .4;
					width: 130rpx;
					height: 220rpx;
					border-radius: 16rpx;
					z-index: 10;
				}

				&-bg {
					top: 0;
					left: 0;
					width: inherit;
					height: inherit;
				}

				&-gift {
					width: 106rpx;
					height: 106rpx;
				}

				&-content,
				&-num {
					font-weight: 400;
					font-size: 20rpx;
					color: #8D5A0C;
				}

				&-day {
					font-weight: 400;
					font-size: 28rpx;
					margin-top: 4rpx;
				}
			}
		}

		&-bg {
			top: 0;
			left: 0;
			width: inherit;
			height: inherit;
		}
	}

	.signIn {
		width: 145rpx;
		height: 162rpx;
		right: 12rpx;
		top: 195rpx;
		z-index: 100;
	}

	.swiper {
		padding: 0 30rpx;
	}

	.v-button {
		left: 50%;
		transform: translateX(-50%);
		bottom: 54rpx;
	}

	.homePage-slide {
		left: 0;
		top: 0;
		z-index: 9999;
		width: 100vw;
		height: 100vh;
		transition: top 2s;

		%lt {
			left: 50%;
			transform: translateX(-50%);
		}

		&-scrool {
			@extend %lt;
			bottom: 52rpx;
			width: 128rpx;
			height: 38rpx;
		}

		&-top,
		&-top2 {
			@extend %lt;
			bottom: 130rpx;
			width: 21.07rpx;
			height: 23.83rpx;
		}

		&-top2 {
			bottom: 101rpx;
		}

		&-bg {
			width: inherit;
			height: inherit;
		}
	}

	.homePage-main {
		width: 690rpx;
		background: #25223B;
		border-radius: 16rpx;
		margin: 30rpx auto;
		padding: 40rpx 20rpx 0rpx;

		.item {
			text-align: center;

			view {
				margin-top: 20rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #EDFAFF;
				line-height: 52rpx;
			}

			image {
				width: 200rpx;
				height: 114rpx;
			}
		}
	}

	.homePage-header {
		text-align: center;
		padding-top: 85rpx;
		top: 0;

		.fish {
			width: 175rpx;
			height: 123.74rpx;
			margin: 4rpx auto 0;
		}

		.commend {
			margin: 0 auto;
			width: 168rpx;
			height: 50rpx;
		}
	}

	.homePage {
		&-bg {
			top: 0;
			left: 0;
			z-index: -1;
			width: 750rpx;
			height: 1624rpx;
		}
	}
</style>